﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="../../../Content/Site.css" rel="stylesheet" />
    <script src="../../../Scripts/jquery/jquery-1.11.0.min.js"></script>
    <link href="../../../Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/default/easyui.css" rel="stylesheet" />
    <link href="../../../Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/icon.css" rel="stylesheet" />
    <script src="../../../Scripts/jquery-easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
    <script src="../../../Scripts/jquery-easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>
    <script src="../../../Scripts/jquery-extensions/jquery.jdirk.js"></script>
    <script>
        $(function () {

            //c1 级联 c2
            //级联字段: valueField 不用管
            //级联数据源：c2的url 不用管
            //级联的参数名称：c1Val

            $("#c1").combobox({
                url: "Handler1.ashx",
                valueField: "ID",
                textField: "AreaName",
                mode: "remote",
                onSelect: function (record) {
                    //console.log(record);
                    $("#c2").combobox("reload").combobox("clear");
                }
            });

            $("#c2").combobox({
                url: "Handler2.ashx",
                valueField: "ID",
                textField: "AreaName",
                mode: "remote",
                onShowPanel: function () {
                    //检查c1是否存在val，若不存在，清空c2的data
                    var firstVal = $("#c1").combobox("getValue");
                    if ($.string.isNullOrWhiteSpace(firstVal)) {
                        $("#c2").combobox("loadData", []);
                    }
                },
                loader: function (param, success, error) {
                    var opts = $(this).combobox('options');
                    if (!opts.url) return false;
                    //如果c1没有select，则不进行查询
                    var firstVal = $("#c1").combobox("getValue");
                    if ($.string.isNullOrWhiteSpace(firstVal)) { return false; }
                    param["c1Val"] = firstVal;
                    $.ajax({
                        type: opts.method,
                        url: opts.url,
                        data: param,
                        dataType: 'json',
                        success: function (data) {
                            success(data);
                        },
                        error: function () {
                            error.apply(this, arguments);
                        }
                    });
                }
            });
        });
    </script>
</head>
<body>
    <div class="easyui-panel" data-options="fit:true,border:false" style="padding:25px;">
        一级：<input id="c1" name="c1" type="text" />
        <br /><br />
        二级：<input id="c2" name="c2" type="text" />
        <br /><br />
        <br /><br />
        <select class="easyui-combobox">
            <option value="1" selected="selected">测试1</option>
            <option value="2">测试2</option>
            <option value="3">测试3</option>
            <option value="4">测试4</option>
        </select>
    </div>
</body>
</html>
